<template>
  <div class="welcome">
    <div id="video-container" v-if="showVideo"></div>
  </div>
</template>

<script>
import  EZUIKit from "ezuikit-js";
import {getCurrentInstance , onMounted , reactive , ref , toRaw} from 'vue'
export default {
  name:'ezuikit',
  setup(){
        // 获取Composition API 上下文对象
        const {ctx,proxy} = getCurrentInstance();
        //初始化设备表单对象
        const playerParams = reactive({
            autoplay: true,
            id: "video-container",
            accessToken:"",
            url: "",
            template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
            width: 750,
            height: 500
        });
        const showVideo = ref(false);
        //初始化接口调用
        onMounted(()=>{
          showVideo.value = true;
          getVideo();
        });

        const getVideo = async () =>{
          let params = {deviceId:"1476041044533170176"};
          try {
              const { accessToken , url } = await proxy.$api.getAccessToken(params);
              playerParams.accessToken = accessToken;
              playerParams.url = url;
          } catch (error) {
              console.log(proxy.$api);
          }

          var player = new EZUIKit.EZUIKitPlayer(playerParams)
        };

        return {
          playerParams,
          showVideo,
          getVideo
        }
  }
}
</script>

<style lang="scss">
  .welcome{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    position:relative;
    .video-container{
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-50px;
      margin-left:-50px;
    }
  }
</style>
